<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>绘图模板</title>
    <style>
        /* 默认 grab 状态 */
        .grab {
            cursor: grab;
        }

        /* grabbing 状态 */
        .grabbing {
            cursor: grabbing;
        }
    </style>
</head>
<body>

<script src="rgf.js"></script>
<script src="plugin/wrj-ruler.js"></script>
<script>
    const dm = new ht.DataModel();
    const gv = window.gv = new ht.graph.GraphView(dm);
    gv.addToDOM();

    window.setVm = function setVm(vm) {
        window.vm = vm;
        gv.mi(function(e){
            if(e.kind === 'clickBackground' && window.vm.actMode === 'sourceCP') {
                addControlPoint(e.event);
            }
        });

        let gvView = gv.getView();

        gvView.addEventListener('mousemove', function () {
            if(window.vm.actMode === 'sourceCP') {
                gvView.style.cursor = 'crosshair';
            }
            else {
                gvView.style.removeProperty('cursor');
            }
        });

        gvView.addEventListener('mousedown', () => {
            gvView.classList.remove('grab');
            gvView.classList.add('grabbing');
        });

        // 鼠标松开时切换回 grab 状态
        gvView.addEventListener('mouseup', () => {
            gvView.classList.remove('grabbing');
            gvView.classList.add('grab');
        });

        // 鼠标离开元素时确保状态恢复
        gvView.addEventListener('mouseleave', () => {
            gvView.classList.remove('grabbing');
            gvView.classList.add('grab');
        });


        gvView.addEventListener('wheel', function () {
            let datas = gv.dm().getDatas();
            datas.each(function (data) {
                if(data.getImage() === 'locate') {
                    data.setScale(1 / gv.getZoom(),1 / gv.getZoom());
                }
            });
        });

    }

    window.deleteCP = function deleteCP(index) {
        dm.removeDataByTag(index);
    }

    window.sourceFileUpload = function sourceFileUpload(result) {

        let sourceId = result['sourceId'];
        setImage(result['sourceId'], result.col, result.row,
            `/api/images/?image_uuid=${sourceId}`)
        ht.Default.handleImageLoaded = (imageName) => {
            console.log(imageName);
            addImage(imageName).then(() => {
                window.vm.sourceStatus = 'success';
                window.vm.changeCenterBySource(result);
            })
        }
    }

    function addControlPoint(e) {
        var logicalPoint = gv.getLogicalPoint(e);
        var node = dm.getDataByTag(window.vm.idx);
        if(!node) {
            node = new ht.Node();
            node.setImage("locate");
            node.setScale(1 / gv.getZoom(),1 / gv.getZoom());
            node.s('body.color', window.vm.colorArray[(window.vm.idx - 1) % window.vm.colorArray.length]);
            node.a('value', window.vm.idx);
            node.setTag(window.vm.idx);
        }
        node.setPosition(logicalPoint);

        window.vm.actMode = '';
        window.vm.$emit('actModeFinish', logicalPoint);

        // window.vm.tmpWrjCoor = logicalPoint;

        dm.add(node);
        dm.sm().setSelectionMode('none');
    }

    // addNode();

    function setImage(imageName,  row, col, imageUrl) {
        ht.Default.setImage(imageName, row, col, imageUrl);
    }



    function addImage(imageName) {
        dm.clear();
        const node = new ht.Node();
        node.setImage(imageName);
        node.setPosition(0, 0);
        node.setAnchor(0, 0);
        dm.add(node);
        dm.sm().setSelectionMode('none');
        let promise = new Promise((resolve) => {
            setTimeout(() => {
                gv.fitContent(false, 100);
                resolve();
            }, 1000);
        });
        return promise;
    }

    ht.Default.setImage("locate",
        {
            "width": 30,
            "height": 30,
            "blendMode": "override_rgb",
            "boundExtend": 2,
            "pixelPerfect": true,
            "fitSize": true,
            "comps": [
                {
                    "background": "#c0c0c0",
                    "borderWidth": 1,
                    "borderColor": "#ff0000",
                    "type": "rect",
                    "borderJoin": "miter",
                    "rect": [
                        14,
                        0,
                        1,
                        30
                    ],
                },
                {
                    "background": "#c0c0c0",
                    "borderWidth": 1,
                    "borderColor": "#ff0000",
                    "type": "rect",
                    "borderJoin": "miter",
                    "rect": [
                        0,
                        14,
                        30,
                        1
                    ],
                },
                {
                    'type': 'text',
                    'text': {
                        'func': 'attr@value',
                    },
                    'color': '#ff0000',
                    'font': '14px PingFangSC-Regular, \'PingFangSC Regular-GBpc-EUC-H\'',
                    'pixelPerfect': true,
                    'rect': [
                        24,
                        24,
                        5,
                        5
                    ],
                }
            ]
        }
    );

    // setImage();

    const rulerFrame = new ht.widget.RulerFrame(gv), view = rulerFrame.getView();
    rulerFrame.getDefaultRulerConfig().guideVisible = true;
    rulerFrame.getDefaultRulerConfig().guideTipVisible = true;
    rulerFrame.getDefaultRulerConfig().guideTipBackground = "rgb(0, 173, 239)";
    rulerFrame.getDefaultRulerConfig().guideTipTextColor = "white";
    rulerFrame.getLeftRulerConfig().tickSpacingAdaptable = true;
    rulerFrame.getLeftRulerConfig().defaultMajorTickSpacing = 100;
    rulerFrame.getLeftRulerConfig().guideTipVisible = true;
    rulerFrame.getTopRulerConfig().guideTipVisible = true;
    rulerFrame.iv();
    view.style.position = 'absolute';
    rulerFrame.addToDOM();

</script>
</body>
</html>
